<template>
  <div class="page">
    <h3 class="page-title">
      <span>修改告警配置</span>
      <img
        src="../../../../assets/img/ic_form_back@2x.svg"
        style="margin-left: 30px"
        alt
        @click="toBack()"
      >
    </h3>
    <h3 class="offline-edit-title">离线配置</h3>
    <el-form label-width="120px" size="small" class="zb-form" ref="offlineConfigure" label-position="left" :model="formData">
      <div class="offline-edit-box">
        <div class="el-form--inline zb-inline-form">
          <el-form-item label="离线时长大于" class="input-width-control">
            <el-input type="number" v-model.number="formData.offlineDuration"></el-input>
          </el-form-item>
          <span class="unit">分钟 启动告警</span>
        </div>
        <div class="el-form--inline zb-inline-form">
          <el-form-item label="离线提醒次数" class="input-width-control">
            <el-input type="number" v-model.number="formData.offlineRemindTotal"></el-input>
          </el-form-item>
          <span class="unit">次</span>
        </div>
        <div class="el-form--inline zb-inline-form">
          <el-form-item label="离线提醒间隔" class="input-width-control">
            <el-input type="number" v-model.number="formData.remindInterval"></el-input>
          </el-form-item>
          <span class="unit">分钟</span>
        </div>

        <div class="el-form--inline zb-inline-form">
          <el-form-item label="重新连接后" class="input-width-control">
            <el-input type="number" v-model.number="formData.reconnectMinsAfter"></el-input>
          </el-form-item>
          <span class="unit">分钟 解除告警</span>
        </div>
      </div>
      <!-- 置信度-start -->
      <div class="trust-level-title">
        <h3>置信度提醒设置</h3>
      </div>
      <div class="trust-level-edit-box">
        <p>进场车辆置信度低于
          <el-input type="number" v-model="formData.enterConfidence" placeholder="请输入置信度"></el-input>%时提醒中央值守人员(空值不生效)
        </p>
      </div>
      <!-- 置信度-end -->
      <div class="accendant-title">
        <h3>维护人员</h3>
        <div class="add-btn-box" @click="addUser()">
          <img src="../../../../assets/img/ic_subscribe_add@2x.svg" alt>
          <span>添加维护人员</span>
        </div>
      </div>
      <div class="accendant-edit-box">
        <div
          class="el-form--inline zb-inline-form"
          v-for="(item,index) in formData.accendantArr"
          :key="index"
          v-if="item.type!='del'"
        >
          <el-form-item :label="`维护人员${index+1}`" class="input-width-control">
            <el-input type="text" placeholder="维护人员姓名" v-model.trim="item.userName"></el-input>
          </el-form-item>
          <el-form-item label class="input-width-control" label-width="0px" :prop="'accendantArr.'+index+'.phone'" :rules="{pattern:/^1\d{10}$/, message:'请输入合法手机号码',trigger:'blur'}">
            <el-input type="text" placeholder="维护人手机号码" v-model="item.phone"></el-input>
          </el-form-item>
          <img
            src="../../../../assets/img/ic_btn_delete copy.svg"
            alt
            class="del-icon"
            @click="delUser(index)"
          >
        </div>
      </div>
    </el-form>
    <div class="save-cancel-btn-box">
      <el-button @click="toBack()" plain type="primary">取 消</el-button>
      <el-button type="primary" @click="testSaveData()">保 存</el-button>
    </div>
  </div>
</template>

<script>
import common from "@mixins/common.js";
export default {
  mixins: [common],
  data() {
    return {
      id: "", //停车场记录id
      parkUUID: "", //停车场UUID
      parkName: "", //停车场名称
      type: "add", //新增或修改(add or modify)
      formData: {
        id: "", //配置id
        offlineDuration: 0, //离线警告时长
        offlineRemindTotal: 0, //离线提醒次数
        remindInterval: 0, //离线提醒间隔
        reconnectMinsAfter: 0, //重连N分钟后解除警告
        enterConfidence: "", //置信度
        oldMaintainer: [], //修改维护人员
        addMaintainer: [], //新增维护人员
        deleteMaintainer: [], //删除维护人员
        //维护人员信息集合
        accendantArr: [
          {
            id: "", //记录id
            phone: "", //电话
            userName: "", //姓名
            type: "add"
          }
        ],
      },
      personInfo: {
        id: "", //记录id
        phone: "", //电话
        userName: "", //姓名
        type: "add"
      }
    };
  },
  created() {
    this.parkUUID = this.$route.query.parkId;
    this.parkName = this.$route.query.parkName;
    this.getData();
  },
  methods: {
    checkPhoneNum(rule, value, callback){
      if(value && !/^1\d{10}$/.test(value)){
        callback(new Error("请输入正确的电话号码"));
      }else{
        callback();
      }  
    },
    goBack() {},
    getData() {
      let self = this;
      let params = {
        parkId: this.$route.query.parkId
      };
      API.fetchGet("/operatorPark/getAlarm", params).then(
        res => {
          if (res.data) {
            if (res.data.id) {
              self.type = "modify";
            }
            self.formData = {
              id: res.data.id,
              offlineDuration: res.data.offlineDuration,
              offlineRemindTotal: res.data.offlineRemindTotal,
              remindInterval: res.data.remindInterval,
              reconnectMinsAfter: res.data.reconnectMinsAfter,
              enterConfidence: res.data.enterConfidence,
              oldMaintainer: [],
              addMaintainer: [],
              deleteMaintainer: [],
              accendantArr: []
            };
            self.formData.addMaintainer = res.data.addMaintainer;
            self.formData.oldMaintainer = res.data.oldMaintainer;
            self.formData.deleteMaintainer = res.data.deleteMaintainer;
            if (
              self.formData.oldMaintainer &&
              self.formData.oldMaintainer.length > 0
            ) {
              for (let i = 0; i < self.formData.oldMaintainer.length; i++) {
                let obj = {
                  id: self.formData.oldMaintainer[i].id,
                  userName: self.formData.oldMaintainer[i].userName,
                  phone: self.formData.oldMaintainer[i].phone,
                  type: "modify"
                };
                self.formData.accendantArr.push(obj);
              }
            } else {
              self.formData.accendantArr.push(self.personInfo);
            }
          }
        },
        err => {}
      );
    },
    testSaveData(){
      this.$refs['offlineConfigure'].validate(valid => {
        if (valid) {
          this.saveData()
        } else {
          return false;
        }
      });
    },
    saveData() {
      let self = this;
      let reg = /^(?:[1-9]?\d|100)$/;
      let enterConfidence = self.formData.enterConfidence;
      if (enterConfidence) {
        let enterConfidenceNum = Number(enterConfidence);
        if (!reg.test(enterConfidenceNum) || enterConfidenceNum > 100) {
          self.showToast("置信度只能输入0~100的正整数", 2);
          return;
        }
      }
      let params = {
        parkUUId: this.$route.query.parkId,
        offlineDuration: self.formData.offlineDuration,
        offlineRemindTotal: self.formData.offlineRemindTotal,
        remindInterval: self.formData.remindInterval,
        reconnectMinsAfter: self.formData.reconnectMinsAfter,
        enterConfidence: enterConfidence
      };
      if (self.type == "add") {
        params.addMaintainer = [];
        for (let i = 0; i < self.formData.accendantArr.length; i++) {
          let obj = self.formData.accendantArr[i];
          if (!obj.userName || !obj.phone) {
            continue;
          }
          let tempObj = {
            id: "",
            userName: obj.userName,
            phone: obj.phone
          };
          params.addMaintainer.push(tempObj);
        }
      } else if (self.type == "modify") {
        params.addMaintainer = [];
        params.oldMaintainer = [];
        params.deleteMaintainer = [];
        for (let i = 0; i < self.formData.accendantArr.length; i++) {
          let obj = self.formData.accendantArr[i];
          let tempObj = {
            id: "",
            userName: obj.userName,
            phone: obj.phone
          };
          if (obj.type == "del") {
            tempObj.id = obj.id;
            params.deleteMaintainer.push(tempObj);
          } else if (obj.type == "modify") {
            tempObj.id = obj.id;
            params.oldMaintainer.push(tempObj);
          } else if (obj.type == "add") {
            if (obj.userName == "" || obj.phone == "") {
              continue;
            }
            params.addMaintainer.push(tempObj);
          }
        }
      }
      API.fetchPost("/operatorPark/setAlarm", params).then(
        res => {
          if (res.status == 1) {
            self.showToast("保存成功！", 1);
            self.toBack();
          }
        },
        err => {
          self.showToast(err.data.mesaage, 2);
        }
      );
    },
    delUser(index) {
      if (this.formData.accendantArr[index].id) {
        this.formData.accendantArr[index].type = "del";
      } else {
        this.formData.accendantArr.splice(index, 1);
      }
    },
    addUser() {
      let obj = {
        id: "",
        userName: "",
        phone: "",
        type: "add"
      };
      this.formData.accendantArr.push(obj);
    },
    toBack() {
      this.$router.push({
        path: "/allParkinglotInfo",
        query: this.$route.query
      });
    }
  }
};
</script>


<style lang="less">
@import "../../../../assets/less/base/zbForm.less";
.zb-inline-form {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  .el-form-item {
    margin-bottom: 0;
    &.input-width-control {
      .el-form-item__content {
        width: 180px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.zb-form {
  width: 580px;
}
.offline-edit-box {
  padding: 24px 10px;
}
.accendant-edit-box {
  padding: 24px 10px;
}
.page {
  background: #ffffff;
  padding: 20px 30px 100px 30px;
  width: 960px;
  margin: 10px auto;
  border: 1px solid #d7dce2;
  border-bottom: 0;
}
.page-title {
  margin-bottom: 44px;
  img {
    margin-bottom: 4px;
    cursor: pointer;
  }
}
.del-icon {
  cursor: pointer;
}
.el-input {
  width: 180px;
}
.accendant-title {
  display: flex;
  justify-content: flex-start;
  h3 {
    margin-right: 50px;
  }
  .add-btn-box {
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-bottom: 2px;
    }
    span {
      color: #5995d8;
      padding-left: 5px;
    }
  }
}
.save-cancel-btn-box {
  margin-top: 40px;
  margin-bottom: 100px;
}
.accendant-edit-box {
  .item {
    img {
      cursor: pointer;
    }
  }
}
.trust-level-edit-box {
  margin-bottom: 40px;
  p {
    padding-left: 20px;
    margin-top: 24px;
  }
}
</style>
